<template>
	<view class="u-wrap" :style="{'height':height+'px'}">
		<view class="u-menu-wrap">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop" :scroll-into-view="itemId">
				<view v-for="(item, index) in leftMenus" :key="index" class="u-tab-item"
					:class="[leftMenusCurrent == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
					<text class="u-line-1">{{ item.name }}</text>
				</view>
			</scroll-view>
			<view class="right-box">
				<view class="font-24">
					<u-tabs :list="tabbar" :current="tabbarCurrent" @click="tabClick" :activeStyle="tabbarActiveStyle" lineColor="#675f91"></u-tabs>
					<u-line></u-line>
					<sort :value="sortType" @change="sort" type="stock"></sort>
				</view>
	
				<scroll-view scroll-y scroll-with-animation class="flex-1 scroll-view" :scroll-into-view="scrollViewId" @scrolltolower="scrolltolower">
					<view class="page-view">
						<view class="item-container">
							<template v-for="v in list">
								<view :key="v.id" :id="'scrollView_'+v.material_id[0]">
									<view class="blank20"></view>
									<view class="flex">
										<view class="flex-1">
											<view class="">
												{{ v.material_id[1] }}
											</view>
											<view class="text-gray font-24">
												库存：{{ v.stock_qty }}{{v.main_unit_id[1]}}
												成本：{{ v.stock_cost }}
											</view>
										</view>
										<view class="">
											<view class="" v-show="valueObj[v.material_id[0]]<0">
												<u-button type="primary" size="mini" text="添加" :plain="true" @click="add(v.material_id[0])"></u-button>
											</view>
											<view class="" v-show="valueObj[v.material_id[0]] >= 0">
												<u-number-box v-model="valueObj[v.material_id[0]]" @change="valChange" :min="min" :name="v.material_id[0]" :asyncChange="true" bgColor="#ffffff" @overlimit="overlimit"  :buttonSize="20">
														<view slot="minus" class="minus">
															<u-icon name="minus" size="12"></u-icon>
														</view>
														<view slot="plus" class="plus">
															<u-icon name="plus" size="12"></u-icon>
														</view>
													</u-number-box>
											</view>
										</view>
									</view>
									<view class="blank20"></view>
									<u-line color="#f5f5f5"></u-line>
								</view>
							</template>
							<view class="blank20"></view>
							<view class="flex" style="justify-content: center;" v-if="list.length<allList.length">
								<view class="">
									<u-loading-icon size="16"></u-loading-icon>
								</view>
								<view class="ml15 text-light-gray">
									加载中
								</view>
							</view>
							<view class="flex" style="justify-content: center;" v-if="list.length == allList.length">
								<view class=" text-light-gray">
									到底了
								</view>
							</view>
							<view class="blank20"></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import sort from "@/components/sort.vue";
	export default {
		name:"inventory-material-list",
		components: {
			sort
		},
		props: {
			height:Number,
			scroll_id:Number,//食材id
			data:Array,
			menu:Array,
			loadtime:Number,
			page: {
				type: String,
				default: 'inventoryFood'
			},
		},
		data() {
			return {
				leftMenus:[],
				list:[],
				allList:[],
				leftMenusCurrent:0,
				itemId: "", // 栏目右边scroll-view用于滚动的id
				scrollTop: 0, //tab标题的滚动条位置
				oldScrollTop: 0,
				material_tree:{},
				material_obj:{},
				tabbar:[],
				tabbarCurrent: 0,
				tabbarActiveStyle: {
					color: '#675f91'
				},
				scrollViewId:'',
				valueObj: {},
				min: -1,
				pageSize:15,
				sortType:'',//price_desc,price_asc,stock_desc,stock_asc
			};
		},
		watch: {
			scroll_id(newVal,oldVal){
				if(newVal == 0) return;
				let id = newVal;
				let v = this.material_obj[id];
				let stock_top_loc_id = v.stock_top_loc_id[0];
				let sec_category_id = v.sec_category_id[0];
				let leftMenusCurrent = this.leftMenus.findIndex(m=>m.id == stock_top_loc_id);
				this.leftMenusCurrent = leftMenusCurrent;
				this.updataTabbar();
				let tabbarCurrent = this.tabbar.findIndex(m=>m.id == sec_category_id);
				this.tabbarCurrent = tabbarCurrent;
				this.updataList(id);
			},
			loadtime(newVal,oldVal){
				if(newVal != oldVal){
					this.init();
				}
			}
		},
		created() {
			this.init();
		},
		methods: {
			sort(type){
				this.sortType = type;
				this.updataList();
			},
			sortList(list){
				let sortType = this.sortType;
				// price_desc,price_asc,stock_desc,stock_asc
				switch (sortType){
					case 'price_desc':
						list.sort((a, b) => Number(b.stock_cost) - Number(a.stock_cost));
					break;
					case 'price_asc':
						list.sort((a, b) => Number(a.stock_cost) - Number(b.stock_cost));
					break;
					case 'stock_desc':
						list.sort((a, b) => b.stock_qty - a.stock_qty);
					break;
					case 'stock_asc':
						list.sort((a, b) => a.stock_qty - b.stock_qty);
					break;
					default:
					    break;
				}
			},
			init() {
				this.leftMenusCurrent = 0;
				let material_tree = {};
				let leftMenus = [];
				let menuObj = {};
				let material_obj = {};
				let $store_material_obj = this.$store.getters.get_material_obj;
				this.data.forEach(v => {
					try {
						v.sel_weight = $store_material_obj[v.material_id[0]].sel_weight;
						if(v.sel_weight == 5 ){
							console.log(v);
						}
					} catch (e) {
						v.sel_weight = '0';
					}
					let material_id = v.material_id[0];
					if(typeof this.valueObj[material_id] == 'undefined'){
						this.valueObj[material_id] = -1;
					};
					material_obj[material_id] = v;
					let stock_top_loc_id = v.stock_top_loc_id[0];
					let stock_top_loc_name = v.stock_top_loc_id[1];
					let sec_category_id = v.sec_category_id[0];
					let sec_category_name = v.sec_category_id[1];
					if(!material_tree[stock_top_loc_id]){
						material_tree[stock_top_loc_id] = {};
					}
					if(!material_tree[stock_top_loc_id][sec_category_id]){
						material_tree[stock_top_loc_id][sec_category_id] = {
							id: sec_category_id,
							name: sec_category_name,
							list: []
						}
					}
					material_tree[stock_top_loc_id][sec_category_id].list.push(v);
				});
				this.menu.forEach(v=>{
					if(material_tree[v.id]){
						leftMenus.push(v);
					}
				});
				this.material_obj = material_obj;
				this.leftMenus = leftMenus;
				this.material_tree = material_tree;
				this.updataTabbar(1);
			},
			// 份数
			valChange(e) {
				// console.log(e);
				this.valueObj[e.name] = e.value;
				this.$forceUpdate();
				this.updata();
			
				// 此处待增加 出库数量不能大于库存数量 判断
				// uni.$u.toast('出库数量不能大于库存数量');
			},
			overlimit(e) {
				console.log("overlimit");
				console.log(e);
			},
			add(id) {
				this.valueObj[id] = 0;
				// this.$set(this.valueObj,id,1)
				this.$forceUpdate();
				// this.$set('valueObj',id,1);
				this.updata();
				// console.log(this.valueObj[id]);
			},
			updata() {
				let bagList = [];
				for (let id in this.valueObj) {
					let tips = [];
					if(this.valueObj[id]>=0){
						let material = this.material_obj[id];
						bagList.push({
							id: parseInt(id),
							name: material.material_id[1],
							value: this.valueObj[id],
							unit_id:material.main_unit_id[0],
							unit_name:material.main_unit_id[1],
							stock_cost:material.stock_cost,
							stock_qty:material.stock_qty,
						});
					}
					
				}
				this.$emit("updata",bagList);
			},
			updataTabbar(isFlesh) {
				let tabbar = [{
						id: 'all',
						name: '全部'
					},
					{
						id: 'sel_weight',
						name: '常用'
					},
					{
						id: 'sel_weight_small',
						name: '不常用'
					}
				];
				
				let stock_top_loc_id = this.leftMenus[this.leftMenusCurrent].id;
				for (let id in this.material_tree[stock_top_loc_id]) {
					tabbar.push(this.material_tree[stock_top_loc_id][id]);
				}
				
				this.tabbar = tabbar;
				if(isFlesh){
					this.tabbarCurrent = 0;
					this.list = [];
					setTimeout(()=>{
						this.updataList();
					},0)
				}
				
			},
			async updataList(id) {
				this.list = [];
				setTimeout(()=>{
					let stock_top_loc_id = this.leftMenus[this.leftMenusCurrent].id;
					let sec_category_id = this.tabbar[this.tabbarCurrent].id;
					let list = [];
					if (sec_category_id == 'all' || sec_category_id == 'sel_weight' || sec_category_id == 'sel_weight_small') {
						for (let id in this.material_tree[stock_top_loc_id]) {
							list = list.concat(this.material_tree[stock_top_loc_id][id].list);
						}
					} else {
						list = this.material_tree[stock_top_loc_id][sec_category_id].list;
					}
					if (sec_category_id == 'sel_weight') {
						list = list.filter(v => Number(v.sel_weight) >= 4);
						list.sort((a, b) => Number(b.sel_weight) - Number(a.sel_weight));
					};
					if (sec_category_id == 'sel_weight_small') {
						list = list.filter(v => Number(v.sel_weight) < 4);
						list.sort((a, b) => Number(b.sel_weight) - Number(a.sel_weight));
					};
					
					this.sortList(list);
					this.allList = list;
					if(id){
						let _index = list.findIndex(v=>v.material_id[0] == id);
						this.list = list.slice(0,_index+10);
					}else if(list.length > this.pageSize){
						this.list = list.slice(0,this.pageSize);
					}else{
						this.list = list
					}
					this.$nextTick(()=>{
						if(id){
							this.scrollViewId = 'scrollView_'+id;
						}else if(list.length>0){
							this.scrollViewId = 'scrollView_'+list[0].material_id[0]
						}
						this.$emit('scrollViewIdDone');
					})
					
				},0)
			},
			scrolltolower(){
				let _length = this.list.length;
				let _all_length = this.allList.length;
				if(_length == _all_length){
					return;
				}
				let newList = this.allList.slice(_length,this.pageSize+_length);
				this.list = this.list.concat(newList);
			},
			tabClick(e) {
				this.tabbarCurrent = e.index;
				this.updataList();
			},
			// 点击左边的栏目切换
			swichMenu(index) {
				if (index == this.current) return;
				this.leftMenusCurrent = index;
				this.updataTabbar(1);
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "./inventory-material-list.scss";
</style>